<template>
  <div>
    <img width="210" :src="imgUrl" alt="" srcset="" style="margin-top: 11px" />
    <div class="itembody">
      <div style="height: 260px">
        <div class="itemtitle" style="padding-bottom: 20px; padding-top: 0">
          <h4>旅行家专栏</h4>
          <span><a href="#">专栏首页</a> </span>
        </div>
        <div>
          <swiper-img-vue :swiperList="travellerList" />
        </div>
      </div>
      <div style="height: 230px">
        <div class="itemtitle">
          <h3>旅游攻略推荐</h3>
          <span><a href="#">更多</a> </span>
        </div>
        <div>
          <img width="100%" :src="gonglve.imgUrl" alt="" />
        </div>
        <p style="text-align: left; padding: 10px 0">{{ gonglve.text }}</p>
      </div>
      <div style="height: 280px">
        <div class="itemtitle">
          <h3>最新活动</h3>
          <span><a href="#">查看全部</a></span>
        </div>
        <div>
          <img width="100%" :src="activityList[1].imgUrl" alt="" />
          <p style="color: #ff9d00; font-weight: 700">
            {{ activityList[1].title }}
          </p>
          <p>{{ activityList[1].text }}</p>
        </div>
      </div>
      <div style="height: 220px">
        <div class="itemtitle">
          <h3>未知旅行实验室</h3>
          <span><a href="#">查看更多</a></span>
        </div>
        <div>
          <img width="100%" :src="laboratory.imgUrl" alt="" />
        </div>
      </div>
      <div style="height: 180px">
        <div class="itemtitle">
          <h3>加入马蜂窝</h3>
          <span><a href="#">了解详情</a></span>
        </div>
        <div>
          <img width="100%" :src="joinmfw.imgUrl" alt="" />
        </div>
      </div>
      <div>
        <div class="itemtitle">
          <h3>马蜂窝旅游网最新资讯</h3>
        </div>
        <div>
          <ul>
            <li
              style="
                font-size: 14px;
                text-align: left;
                margin: 10px 0;
                color: #666666;
              "
              v-for="(item, i) in mfwnewsList"
              :key="i"
            >
              {{ item.date }}日-{{ item.text }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/home";
import swiperImgVue from "./component/swiperImg.vue";

export default {
  data() {
    return {
      list: {},
      col: {},
      travellerList: [],
      gonglve: [],
      activityList: [],
      laboratory: [],
      joinmfw: [],
      mfwnewsList: [],
      imgUrl:
        "https://images.mafengwo.net/images/safety-prevention/index-link-v2.png",
    };
  },
  components: {
    swiperImgVue,
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      api.getTravellerInfo().then((res) => {
        console.log("item1=>>", res);
        this.travellerList = res.travellerList;
      });
      api.getGonglveInfo().then((res) => {
        console.log("item2=>>", res);
        this.gonglve = res.gonglve;
      });
      api.getActivityInfo().then((res) => {
        console.log("item3=>>", res);
        this.activityList = res.activityList;
      });
      api.getLaboratoryInfo().then((res) => {
        console.log("item4=>>", res);
        this.laboratory = res.laboratory;
      });
      api.getJoinmfwInfo().then((res) => {
        console.log("item5=>>", res);
        this.joinmfw = res.joinmfw;
      });
      api.getMfwnewsInfo().then((res) => {
        console.log("item6=>>", res);
        this.mfwnewsList = res.mfwnewsList;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import url("~assets/CSS/main-left.scss");
</style>

